Skip to main content

위젯 Options 설정 가이드

DashBuilder의 위젯 객체 설정 가이드 입니다.

기본 구조​

{
  id: "chart_1",
  type: "chart",
  kind: "column",
  style: "column",
  dataOptions: {
    dataSetId: "data1",
    categories: ["city"],
    series: ["housingCost"]
  },
  options: {
    ko: {
      chart: { type: "column" }
      ...
    }
  }
}

설명​

id​

  • 위젯의 고유한 ID 값.

content​

  • 위젯이 표시되는 HTML DOM.

type​

  • 위젯의 타입.
  • chart, sheet, map, img, kpi, iframe, html

kind​

  • 위젯의 타입에 대한 종류.
  • chart
    • bar, column, line, spline, area, pie, gauge, solidgauge
  • iframe
    • iframe, youtube
  • sheet
  • map
  • img
  • kpi
  • html

style​

  • 위젯의 종류에 대한 스타일.
  • bar
    • bar, barStacked, barStacked100
  • column
    • column, columnStacked, columnStacked100, scatter
  • line
    • line, lineStep, spline, polar
  • area
    • area, areaSpline, areaStacked, areaStacked100
  • pie
    • pie, doughnut, halfDoughnut
  • map
  • gauge
  • solidgauge
  • sheet
  • img
  • kpi
  • iframeUrl
  • youtubeUrl
  • html

dataOptions​

  • 위젯의 DataSets 연결 옵션.
  • 해당 옵션의 설정 정보를 통하여 각 위젯의 데이터를 표현.
    • dataSetId : (공통) DataSet 의 ID.
    • columns : 시트 위젯에서 컬럼(열) 정보로 표시 할 DataSet의 keyMap의 ID 들.
    • categories : 차트 위젯에서 category 영역으로 표시 할 DataSet의 keyMap의 ID.
    • series : 차트 위젯에서 series 영역으로 표시 할 DataSet의 keyMap의 ID.
    • jsonUrl : 맵 차트 위젯에서 표현할 지도 데이터 URL.
    • lan : 맵 차트 위젯에서 위도 값으로 지정할 DataSet의 keyMap의 ID.
    • lon : 맵 차트 위젯에서 경도 값으로 지정할 DataSet의 keyMap의 ID.
    • position : 맵 차트 위젯에서 포인트에 표시할 위치 이름.
    • kpi : KPI 위젯에서 데이터 값으로 표현할 DataSet의 keyMap의 ID.
    • dataIdx : KPI, 게이지 차트 위젯에서 데이터 Index.
dataOptions: {
  dataSetId: '',
  columns: ['country', 'jan', 'feb', 'mar']
  categories : ['country']
  series : ['jan', 'feb', 'mar']
  jsonUrl : '../../js/ibmap/map/world.json'
  lan : ['latitude']
  lon : ['longitude']
  position : ['country']
  kpi : "country"
  dataIdx : 0
}